<template>
    <section style="padding: 24px; background:#fff;">
        <a-table ref="table"
                 bordered
                 :loading='loading'
                 :columns="columns"
                 rowKey="id"
                 :data-source="tbList"
                 :pagination="ipagination"
                 @change="handleTableChange">
            <span slot="state"
                  slot-scope="state">
                <a-tag :color="state === '1' ? ' #87d068' : '#f50'">
                    {{stateFilter(state)}}
                </a-tag>
            </span>
            <span slot="avatar"
                  slot-scope="text">
                <a-avatar :src="text" />
            </span>
            <span slot="action"
                  slot-scope="text, record">
                <a href="javascript:;"
                   v-if="record.state==3"
                   @click="handleTop(record.id)">取消置顶</a>
                <a href="javascript:;"
                   v-else
                   @click="handleTop(record.id)">置顶</a>
                <a-divider type="vertical" />
                <a-popconfirm cancelText='取消'
                              okText='确定'
                              title="确定删除吗?"
                              @confirm="() => handleDelete(record.id)"
                              placement="topLeft">
                    <a style="color:red">删除</a>
                </a-popconfirm>
            </span>
        </a-table>
    </section>
</template>
<script>
import { listComments, deleteCommentById, topComment } from '@/api/api'
const columns = [
    {
        title: '序号',
        dataIndex: '',
        key: 'rowIndex',
        align: 'center',
        customRender: function (t, r, index) {
            return parseInt(index) + 1
        },
    },
    {
        title: '内容',
        dataIndex: 'content',
        align: 'center',
        width: 150,
        ellipsis: true,
    },
    {
        title: '头像',
        dataIndex: 'fromAvatar',
        align: 'center',
        width: 80,
        scopedSlots: { customRender: 'avatar' },
    },
    {
        title: '用户名',
        dataIndex: 'fromName',
        align: 'center',
    },
    {
        title: '状态',
        dataIndex: 'state',
        align: 'center',
        width: 70,
        scopedSlots: { customRender: 'state' },
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        align: 'center'
    },
    {
        title: '更新时间',
        dataIndex: 'updateTime',
        align: 'center'
    },
    {
        title: '操作',
        dataIndex: 'edit',
        scopedSlots: { customRender: 'action' },
        align: 'center',
        width: 140
    }
];
export default {
    data() {
        return {
            tbList: [],
            columns,
            loading: false,
            /* 分页参数 */
            ipagination: {
                current: 1,
                pageSize: 10,
                pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + "-" + range[1] + " 共" + total + "条"
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0
            },
        };
    },
    methods: {
        getData(arg) {
            if (arg === 1) {
                this.ipagination.current = 1;
            }
            this.loading = true;
            let pageNo = this.ipagination.current;
            let pageSize = this.ipagination.pageSize;
            listComments(pageNo, pageSize).then(res => {
                if (res.code === 200) {
                    this.loading = false;
                    this.tbList = res.data.records;
                    this.ipagination.total = res.data.total ? res.data.total : 0;
                }
            })

        },
        stateFilter(text) {
            if (text == '0' || text == '') {
                return '删除';
            } else if (text == '1') {
                return '正常';
            } else if (text === '3') {
                return '置顶';
            }
        },
        //删除
        handleDelete(record) {
            deleteCommentById(record).then(res => {
                if (res.code === 200) {
                    this.$message.success(res.data);
                    this.getData();
                } else {
                    this.$message.error(res.message);
                }
            })
        },
        //置顶，取消置顶
        handleTop(record) {
            topComment(record).then(res => {
                if (res.code === 200) {
                    this.$message.success(res.data);
                    this.getData();
                } else {
                    this.$message.error(res.message);
                }
            })
        },
        handleTableChange(pagination) {
            //分页、排序、筛选变化时触发
            this.ipagination = pagination;
            this.getData();
        }
    },
    mounted() {
        this.getData(1);
    },
};
</script>
